<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>会员任务详情 - 社交平台</title>
    <!-- Bootstrap 5 CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- Font Awesome 图标 -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
    
    <style>
        :root {
            --primary: #5B7BDF;
            --primary-light: #E8EBFA;
            --secondary: #FF7D54;
            --success: #28C76F;
            --warning: #FFC107;
            --dark: #2D3436;
            --gray: #6C757D;
            --light-gray: #F8F9FA;
            --border: #E1E4E8;
            --vip: #FFD700;
        }
        
        body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
            background-color: var(--light-gray);
            color: var(--dark);
            padding-top: 56px;
        }
        
        /* 顶部导航 */
        .top-nav {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            height: 56px;
            background-color: white;
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0 16px;
            z-index: 1000;
            border-bottom: 1px solid var(--border);
        }
        
        .nav-title {
            font-size: 18px;
            font-weight: 600;
        }
        
        .nav-btn {
            width: 40px;
            height: 40px;
            display: flex;
            align-items: center;
            justify-content: center;
            background: none;
            border: none;
            color: var(--dark);
            font-size: 20px;
        }
        
        /* 任务头部 */
        .task-header {
            background-color: white;
            padding: 20px 16px;
            margin-bottom: 16px;
        }
        
        .task-badge {
            display: inline-block;
            padding: 3px 10px;
            border-radius: 20px;
            font-size: 12px;
            font-weight: 500;
            margin-bottom: 10px;
        }
        
        .badge-daily {
            background-color: #E3F2FD;
            color: #1976D2;
        }
        
        .badge-weekly {
            background-color: #E8F5E9;
            color: #388E3C;
        }
        
        .badge-vip {
            background-color: #FFF8E1;
            color: #FF8F00;
        }
        
        .task-title {
            font-size: 22px;
            font-weight: 700;
            margin-bottom: 10px;
            line-height: 1.3;
        }
        
        .task-meta {
            display: flex;
            gap: 16px;
            margin-bottom: 16px;
        }
        
        .meta-item {
            display: flex;
            align-items: center;
            gap: 6px;
            color: var(--gray);
            font-size: 14px;
        }
        
        .task-reward {
            display: flex;
            align-items: center;
            gap: 8px;
            font-size: 16px;
            font-weight: 600;
            color: var(--secondary);
            padding: 12px 16px;
            background-color: #FFF5F5;
            border-radius: 10px;
            margin-bottom: 16px;
        }
        
        .reward-icon {
            width: 36px;
            height: 36px;
            background-color: var(--secondary);
            color: white;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        /* 任务进度 */
        .progress-section {
            background-color: white;
            border-radius: 12px;
            padding: 16px;
            margin: 0 16px 16px;
        }
        
        .progress-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 12px;
        }
        
        .progress-title {
            font-size: 16px;
            font-weight: 600;
        }
        
        .progress-stats {
            font-size: 13px;
            color: var(--primary);
        }
        
        .progress-bar-container {
            height: 10px;
            background-color: var(--light-gray);
            border-radius: 5px;
            overflow: hidden;
            margin-bottom: 8px;
        }
        
        .progress-bar {
            height: 100%;
            background: linear-gradient(90deg, var(--primary), #4A69D9);
            border-radius: 5px;
            width: 40%;
            transition: width 0.5s ease;
        }
        
        /* 任务详情 */
        .detail-section {
            background-color: white;
            border-radius: 12px;
            padding: 16px;
            margin: 0 16px 16px;
        }
        
        .section-title {
            font-size: 16px;
            font-weight: 600;
            margin-bottom: 12px;
            display: flex;
            align-items: center;
            gap: 8px;
        }
        
        .section-title i {
            color: var(--primary);
        }
        
        .task-description {
            font-size: 15px;
            line-height: 1.6;
            margin-bottom: 16px;
            color: var(--dark);
        }
        
        .task-steps {
            padding-left: 24px;
            margin-bottom: 16px;
        }
        
        .task-step {
            margin-bottom: 12px;
            line-height: 1.6;
            position: relative;
        }
        
        .task-step::before {
            content: '';
            position: absolute;
            left: -24px;
            top: 6px;
            width: 12px;
            height: 12px;
            border-radius: 50%;
            background-color: var(--primary-light);
            border: 2px solid var(--primary);
        }
        
        .tips-container {
            background-color: #FFF8E1;
            border-radius: 8px;
            padding: 12px 16px;
            margin-top: 16px;
        }
        
        .tips-title {
            font-size: 14px;
            font-weight: 600;
            margin-bottom: 6px;
            display: flex;
            align-items: center;
            gap: 6px;
            color: #E67E22;
        }
        
        .tips-content {
            font-size: 13px;
            line-height: 1.5;
            color: #795548;
        }
        
        /* 相关任务 */
        .related-tasks {
            background-color: white;
            border-radius: 12px;
            padding: 16px;
            margin: 0 16px 80px;
        }
        
        .related-task-item {
            display: flex;
            align-items: center;
            padding: 12px 0;
            border-bottom: 1px solid var(--border);
        }
        
        .related-task-item:last-child {
            border-bottom: none;
        }
        
        .related-task-icon {
            width: 40px;
            height: 40px;
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 18px;
            margin-right: 12px;
        }
        
        .related-task-info {
            flex: 1;
        }
        
        .related-task-title {
            font-size: 15px;
            font-weight: 500;
            margin-bottom: 2px;
        }
        
        .related-task-reward {
            font-size: 12px;
            color: var(--secondary);
        }
        
        .related-task-arrow {
            color: var(--gray);
        }
        
        /* 底部操作区 */
        .action-bar {
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            background-color: white;
            padding: 12px 16px;
            border-top: 1px solid var(--border);
            display: flex;
            gap: 12px;
            z-index: 1000;
        }
        
        .action-btn {
            flex: 1;
            padding: 14px 0;
            border-radius: 10px;
            font-size: 16px;
            font-weight: 500;
            border: none;
            cursor: pointer;
            transition: all 0.2s;
            text-align: center;
        }
        
        .btn-cancel {
            background-color: var(--light-gray);
            color: var(--dark);
        }
        
        .btn-complete {
            background-color: var(--primary);
            color: white;
        }
        
        .btn-claim {
            background-color: var(--success);
            color: white;
        }
    </style>
</head>
<body>
    <!-- 顶部导航 -->
    <div class="top-nav">
        <button class="nav-btn" id="backBtn">
            <i class="fas fa-arrow-left"></i>
        </button>
        <div class="nav-title">任务详情</div>
        <button class="nav-btn" id="shareBtn">
            <i class="fas fa-share-alt"></i>
        </button>
    </div>
    
    <!-- 任务头部 -->
    <div class="task-header">
        <span class="task-badge badge-weekly badge-vip">
            <i class="fas fa-star"></i> 会员周任务
        </span>
        <h1 class="task-title">完成5个日常任务，赢取会员专属奖励</h1>
        
        <div class="task-meta">
            <div class="meta-item">
                <i class="fas fa-calendar-alt"></i>
                <span>剩余3天18小时</span>
            </div>
            <div class="meta-item">
                <i class="fas fa-users"></i>
                <span>3.2万人参与</span>
            </div>
        </div>
        
        <div class="task-reward">
            <div class="reward-icon">
                <i class="fas fa-gift"></i>
            </div>
            <div>
                <div>任务奖励</div>
                <div style="font-size: 18px;"><i class="fas fa-coins"></i> 300积分 + 会员体验卡7天</div>
            </div>
        </div>
    </div>
    
    <!-- 任务进度 -->
    <div class="progress-section">
        <div class="progress-header">
            <div class="progress-title">任务进度</div>
            <div class="progress-stats">2/5 任务已完成</div>
        </div>
        <div class="progress-bar-container">
            <div class="progress-bar"></div>
        </div>
        <div style="display: flex; justify-content: space-between; font-size: 13px; color: var(--gray);">
            <div>已完成: 每日签到、互动点赞</div>
            <div>待完成: 3个任务</div>
        </div>
    </div>
    
    <!-- 任务详情 -->
    <div class="detail-section">
        <h2 class="section-title">
            <i class="fas fa-info-circle"></i> 任务说明
        </h2>
        <p class="task-description">
            作为会员专属周任务，完成指定的5个日常任务即可获得丰厚奖励。每周一0点重置任务进度，周日24点结算奖励。连续4周完成此任务可额外获得"坚持不懈"勋章。
        </p>
        
        <h2 class="section-title">
            <i class="fas fa-list-check"></i> 任务要求
        </h2>
        <ul class="task-steps">
            <li class="task-step">完成每日签到（已完成）</li>
            <li class="task-step">发布1条符合规范的动态内容（未完成）</li>
            <li class="task-step">对5位好友的动态进行点赞或评论（已完成）</li>
            <li class="task-step">浏览推荐内容5分钟（未完成）</li>
            <li class="task-step">分享1条动态到其他平台（未完成）</li>
        </ul>
        
        <div class="tips-container">
            <div class="tips-title">
                <i class="fas fa-lightbulb"></i> 小提示
            </div>
            <div class="tips-content">
                1. 任务进度实时更新，完成后请刷新页面查看最新状态<br>
                2. 发布违规内容将取消任务资格<br>
                3. 每周完成此任务可提升会员成长值
            </div>
        </div>
    </div>
    
    <!-- 相关任务 -->
    <div class="related-tasks">
        <h2 class="section-title">
            <i class="fas fa-link"></i> 相关任务
        </h2>
        
        <div class="related-task-item">
            <div class="related-task-icon" style="background-color: #FCE4EC; color: #C2185B;">
                <i class="fas fa-user-plus"></i>
            </div>
            <div class="related-task-info">
                <div class="related-task-title">邀请好友注册</div>
                <div class="related-task-reward"><i class="fas fa-coins"></i> 500积分/位</div>
            </div>
            <i class="fas fa-chevron-right related-task-arrow"></i>
        </div>
        
        <div class="related-task-item">
            <div class="related-task-icon" style="background-color: #E0F7FA; color: #00695C;">
                <i class="fas fa-trophy"></i>
            </div>
            <div class="related-task-info">
                <div class="related-task-title">会员月度挑战</div>
                <div class="related-task-reward"><i class="fas fa-coins"></i> 1000积分 + 专属礼包</div>
            </div>
            <i class="fas fa-chevron-right related-task-arrow"></i>
        </div>
        
        <div class="related-task-item">
            <div class="related-task-icon" style="background-color: #EDE7F6; color: #6A1B9A;">
                <i class="fas fa-shopping-cart"></i>
            </div>
            <div class="related-task-info">
                <div class="related-task-title">首次购买享优惠</div>
                <div class="related-task-reward"><i class="fas fa-coins"></i> 200积分 + 8折券</div>
            </div>
            <i class="fas fa-chevron-right related-task-arrow"></i>
        </div>
    </div>
    
    <!-- 底部操作区 -->
    <div class="action-bar">
        <button class="action-btn btn-cancel" id="skipBtn">稍后再说</button>
        <button class="action-btn btn-complete" id="goBtn">去完成</button>
    </div>
    
    <!-- Bootstrap JS Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
    
    <script>
        // 倒计时功能
        function startCountdown() {
            // 模拟倒计时 - 实际应用中应从服务器获取结束时间
            const endTime = new Date();
            endTime.setDate(endTime.getDate() + 3);
            endTime.setHours(18);
            endTime.setMinutes(0);
            endTime.setSeconds(0);
            
            function updateCountdown() {
                const now = new Date();
                const diff = endTime - now;
                
                if (diff <= 0) {
                    document.querySelector('.meta-item:first-child span').textContent = '已结束';
                    return;
                }
                
                const days = Math.floor(diff / (1000 * 60 * 60 * 24));
                const hours = Math.floor((diff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
                const minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60));
                
                document.querySelector('.meta-item:first-child span').textContent = 
                    `${days}天${hours}小时${minutes}分`;
            }
            
            // 初始更新
            updateCountdown();
            // 每分钟更新一次
            setInterval(updateCountdown, 60000);
        }
        
        // 显示提示消息
        function showToast(message) {
            const toast = document.createElement('div');
            toast.className = 'fixed bottom-20 left-50 transform -translate-x-50 bg-dark text-white px-4 py-2 rounded-lg text-sm z-50';
            toast.textContent = message;
            document.body.appendChild(toast);
            
            setTimeout(() => {
                toast.style.opacity = '0';
                toast.style.transition = 'opacity 0.3s';
                setTimeout(() => toast.remove(), 300);
            }, 2000);
        }
        
        // 任务步骤点击交互
        function initTaskSteps() {
            const steps = document.querySelectorAll('.task-step');
            steps.forEach(step => {
                if (!step.textContent.includes('已完成')) {
                    step.style.cursor = 'pointer';
                    step.addEventListener('click', function() {
                        const action = this.textContent.trim().includes('发布') ? 
                            '跳转到发布动态页面' : 
                            this.textContent.trim().includes('浏览') ?
                            '自动开始计时浏览' :
                            '跳转到分享页面';
                        
                        showToast(action);
                    });
                }
            });
        }
        
        // 相关任务点击
        function initRelatedTasks() {
            const relatedTasks = document.querySelectorAll('.related-task-item');
            relatedTasks.forEach(task => {
                task.addEventListener('click', function() {
                    const taskName = this.querySelector('.related-task-title').textContent;
                    showToast(`查看${taskName}详情`);
                });
            });
        }
        
        // 初始化页面
        function initPage() {
            startCountdown();
            initTaskSteps();
            initRelatedTasks();
            
            // 返回按钮
            document.getElementById('backBtn').addEventListener('click', function() {
                window.history.back();
            });
            
            // 分享按钮
            document.getElementById('shareBtn').addEventListener('click', function() {
                showToast('分享任务给好友');
            });
            
            // 稍后再说按钮
            document.getElementById('skipBtn').addEventListener('click', function() {
                window.history.back();
            });
            
            // 去完成按钮
            document.getElementById('goBtn').addEventListener('click', function() {
                showToast('跳转到任务中心，继续完成剩余任务');
                // 模拟完成进度更新
                setTimeout(() => {
                    document.querySelector('.progress-bar').style.width = '60%';
                    document.querySelector('.progress-stats').textContent = '3/5 任务已完成';
                    document.querySelector('.progress-section div:last-child div:first-child').textContent = 
                        '已完成: 每日签到、互动点赞、发布动态';
                    document.querySelector('.progress-section div:last-child div:last-child').textContent = 
                        '待完成: 2个任务';
                }, 1000);
            });
        }
        
        // 页面加载完成后初始化
        document.addEventListener('DOMContentLoaded', initPage);
    </script>
</body>
</html>
